<template>
  <div class="box">
    <!-- 返回主页和新增学员状态按钮开始 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="
        display: flex;
        align-items: center;
        height: 50px;
        margin-bottom: 30px;
      "
    >
      <el-button type="primary" @click="goback" style="margin-left: 15px"
        >返回上一页</el-button
      >
      <el-button type="primary" @click="increased" style="margin-left: 15px"
        >新增学员状态记录</el-button
      >
    </el-form>
    <!-- 返回主页和新增学员状态按钮结束 -->

    <!-- 学员基本信息展示开始 -->
    <el-descriptions
      class="margin-top description"
      title="学员基本信息"
      :column="2"
      border
    >
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ curname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          邀约人
        </template>
        {{ curinviter }}
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          课任教师
        </template>
        {{curteacher}}
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          毕业院校
        </template>
        <el-tag size="normal">{{ curschool }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          学历
        </template>
        <el-tag size="normal">{{ cureducation }}</el-tag>
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-monitor"></i>
          目前状态
        </template>
       {{ curenable }}
      </el-descriptions-item> -->
    </el-descriptions>
    <!-- 学员基本信息展示结束 -->

    <el-tag
      type="success"
      size="medium"
      style="
        font-size: 20px;
        float: left;
        font-weight: bold;
        margin-bottom: 15px;
      "
      ><i class="el-icon-document" style="margin-right: 5px"></i
      >学员状态记录</el-tag
    >

    <!-- 学员状态记录展示开始 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      highlight-current-row
      height="calc(100vh - 430px )"
    >
      <!-- <el-table-column prop="name" label="姓名" min-width="100"> </el-table-column> -->
      <el-table-column prop="state" label="状态" min-width="100">
      </el-table-column>
      <!-- <el-table-column prop="inviter" label="邀约人" min-width="100"> </el-table-column> -->
      <el-table-column prop="startTime" label="开始时间" min-width="100">
      </el-table-column>
      <el-table-column prop="teacher" label="课任教师" min-width="100">
      </el-table-column>
      <el-table-column prop="enable" label="目前状态" min-width="100">
      </el-table-column>
      <el-table-column prop="describe" label="状态说明" min-width="150">
      </el-table-column>
      <!-- <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="change(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="del(scope.$index, tableData)"
            >删除</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 学员状态记录展示结束 -->

    <!-- <el-dialog
      title="状态说明"
      :visible.sync="dialogFormVisible"
      append-to-body
    >
      <el-form :model="tableData1">
        <el-form-item :label-width="formLabelWidth">
          <el-input
            v-model="tableData1.describe"
            autocomplete="off"
            type="textarea"
            placeholder="请输入状态说明"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog> -->

    <!-- 点击新增学员状态按钮弹出的对话框开始 -->
    <el-dialog
      title="学员状态记录"
      :visible.sync="dialogFormVisibles"
      append-to-body
    >
      <el-form :model="tableData1">
        <el-form-item label="学员状态" :label-width="formLabelWidth">
          <el-input v-model="tableData1.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课任老师" :label-width="formLabelWidth">
          <el-input v-model="tableData1.teacher" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目前状态" :label-width="formLabelWidth">
          <el-input v-model="tableData1.enable" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态说明" :label-width="formLabelWidth">
          <el-input v-model="tableData1.describe" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校" :label-width="formLabelWidth">
          <el-input
            v-model="tableData1.school"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-input
            v-model="tableData1.education"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">取 消</el-button>
        <el-button type="primary" @click="ensure1">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击新增学员状态按钮弹出的对话框结束 -->

    <!-- 底部分页开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[10, 20, 50]"
      :page-size="limit"
      layout=" prev, pager, next,->,sizes,total"
      :total="totalCount"
    >
    </el-pagination>
    <!-- 底部分页结束 -->
  </div>
</template>

<script>
import axios from "axios";
import { update, add, findby } from "../api/student";
export default {
  data() {
    return {
      page: 1,
      limit: 10,
      totalCount: 0,
      dialogFormVisible: false,
      dialogFormVisibles: false,
      formLabelWidth: "120px",
      tableData: [],
      curname: "",
      curinviter: "",
      cureducation: "",
      curschool: "",
      tableData1: {
        state: "",
        teacher: "",
        describe: "",
        uuid: "",
        enable: "",
        education: "",
        school: "",
      },
      uuid: "",
      index: "",
    };
  },
  mounted() {
    this.findAll();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.findAll();
      // 用户选择后，再次请求后端，重新传递数据
    },
    handleCurrentChange(val) {
      this.page = val;
      // console.log(`当前页: ${val}`);
      this.findAll();
    },

    goback() {
      this.$router.back();
    },
    increased() {
      // this.tableData1 = this.tableData[0];
      this.tableData1.school = this.tableData[0].school;
      this.tableData1.education = this.tableData[0].education;
      this.tableData1.uuid = this.tableData[0].uuid;
      // console.log(this.tableData1.uuid)
      this.dialogFormVisibles = true;
    },
    async ensure() {
      this.dialogFormVisible = false;
      // console.log(this.form)
      await update(this.tableData1)
        .then(() => {
          this.$message({
            type: "success",
            message: "添加状态说明成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "添加状态说明失败",
          });
        });
      this.findAll();
    },
    async ensure1() {
      this.dialogFormVisibles = false;
      // console.log(this.form)
      // console.log(this.tableData1)
      if (this.tableData1.enable === "在职") {
        this.tableData1.enable = 1;
      } else if (this.tableData1.enable === "离职") {
        this.tableData1.enable = 0;
      } else {
        this.$message({
          type: "warning",
          message: "目前状态只能为离职/在职",
        });
        return false;
      }
      (this.tableData1.name = this.tableData[this.index].name),
        (this.tableData1.inviter = this.tableData[this.index].inviter),
        await add(this.tableData1)
          .then(() => {
            this.$message({
              type: "success",
              message: "添加状态记录成功",
            });
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "添加状态记录失败",
            });
          });
      this.findAll();
    },
    del(index, rows) {
      rows.splice(index, 1);
    },
    change(index, val) {
      // console.log(this.tableData[index].name);
      this.dialogFormVisible = true;
      this.tableData1 = { ...val };
    },
    async findAll() {
      this.uuid = localStorage.getItem("uuid");
      const res = await findby({
        page: this.page,
        limit: this.limit,
        uuid: this.uuid,
      });
      const resData = res.data.data;

      this.index = resData.length - 1;
      console.log(resData);
      this.curname = resData[this.index].name;
      this.curinviter = resData[this.index].inviter;
      this.curschool = resData[this.index].school;
      this.cureducation = resData[this.index].education;
      this.totalCount = res.data.count;
      this.tableData = resData.map((v) => {
        if (v.enable === 1) {
          v.enable = "在职";
        } else if (v.enable === 0) {
          v.enable = "离职";
        }
        return {
          id: v.id,
          name: v.name,
          state: v.state,
          inviter: v.inviter,
          startTime: v.createTime,
          teacher: v.teacher,
          describe: v.describe,
          uuid: v.uuid,
          enable: v.enable,
          school: v.school,
          education: v.education,
        };
      });
      // console.log(this.tableData[this.index].name);
    },
  },
};
</script>

<style lang="less" scoped>
.description {
  width: 32%;
  height: 195px;
  line-height: 30px;
}
.el-table {
  line-height: 30px;
}
</style>
